<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑步</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=lHrn1ZBSK3lHGbLFqpjHocrjWLdU36oW"></script>
</head>

<body class="dpflex fdc">
    <!-- 头部 -->
    <div class="header" id="header">
    </div>
    <!-- 内容区域 -->
    <div class="content flex1 overflowy  dpflex fdc">
        <!-- 头部的累计跑步距离 -->
        <div class="total-run-km">
            <p class="text">目前累积跑步距离:</p>
            <p> <span class="total-num" id="totalNum"> </span>公里 </p>
        </div>
        <!-- 地图---当前位置 -->
        <div class="init-map flex1" id="initMap"></div>

    </div>
    <!-- go按钮 -->
    <div class="go-btn" id="goBtn">
        GO
    </div>
    <!-- 倒计时蒙层 -->
    <div class="count-down-mask base-mask" id="countDownMask">
        <span class="count-down-num" id="countDownNum">3</span>
    </div>
    <!-- 数据模式蒙层 -->
    <div class="data-mode-mask base-mask" id="dataModeMask">
        <p class="smallTitle">户外跑</p>
        <p class="bigTitle">运动中</p>
        <p class="runkm-box"> <span id="nowKm" class="now-km"> 0.03</span>公里</p>
        <p class="location dpflex">
            <span class="txt">GPS信号低,数据精准度低</span>
            <i id="iconLocation" class="iconfont zp-location"></i>
        </p>
        <ul class="data-info dpflex mt40">
            <li class="info-item">
                <i class="iconfont zp-speed"></i>
                <p class="mt10 mb10">配速</p>
                <span id="speed" class="">12'47"</span>
            </li>
            <li class="info-item">
                <i class="iconfont zp-time"></i>
                <p class="mt10 mb10">用时</p>
                <span id="takeTime">00:00:00</span>
            </li>
            <li class="info-item">
                <i class="iconfont zp-calorie"></i>
                <p class="mt10 mb10">千卡</p>
                <span id="calorie">12'47"</span>
            </li>
        </ul>
        <div class="btns dpflex mt40">
            <!-- 继续 -->
            <div id="continueBtn" class="continue-btn">
                <i class="iconfont zp-play "></i>
                <p class="mt10">继续</p>
            </div>
            <!-- 暂停 -->
            <div id="pauseBtn" class="pause-btn ">
                <i class="iconfont zp-stop "></i>
                <p class="mt10">暂停</p>
            </div>
            <!-- 结束 -->
            <div id="stopBtn" class="stop-btn">
                <i class="iconfont zp-close "></i>
                <p class="mt10">结束</p>
            </div>
        </div>
    </div>
    <!-- 地图模式蒙层 -->
    <div class="map-mode-mask base-mask" id="mapModeMask">
        <!-- 地图 --> 
        <p class="modality-map" id="modalityMap"></p>
        <i id="backBtn" class="iconfont zp-left "></i>
        <span id="finishBtn" class="finish">完成</span>
        <!-- 底部的信息区域 -->
        <div class="card">
            <div class="top">
                <h3 class="outrun">户外跑</h3>
                <p> <span id="cardRunKm" class="run-km">99.99</span>公里</p>
                <span id="date" class="date">2021-07-07</span>
            </div>

            <ul class="btm dpflex">
                <li class="btn-item">
                    <span>14'51"</span>
                    <p class="text  mt8">配速</p>
                </li>
                <li class="btn-item">
                    <span>14'51"</span>
                    <p class="text mt8">用时</p>
                </li>
                <li class="btn-item">
                    <span>3600</span>
                    <p class="text mt8">千卡</p>
                </li>
            </ul>

        </div>
    </div>


    <!-- 底部导航栏 -->
    <footer class="footer " id="footer"></footer>

    
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</html>